<template>
  <div class="app-container">
    <el-form ref="form"
             :model="form"
             :label-position="labelPosition"
             class="register-form">
      <el-row :gutter="40">
        <el-col :span="8">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="事务所名称">
                <el-input v-model="form.firmName" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事务所编号">
                <el-input v-model="form.officeNumber" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事务所类型">
                <el-input v-model="form.typeOfFirm" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否有证券资格">
                <el-input v-model="form.haveSecuritiesQualification" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否有 H 股资格">
                <el-input v-model="form.haveHShareQualification" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="注册会计师数量">
                <el-input v-model="form.numberOfCpas" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="其中分所注师数量">
                <el-input v-model="form.numberOfBranchRegisteredEngineers" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专职从业人员数量">
                <el-input v-model="form.numberOfFullTimePractitioner" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总所/分所">
                <el-input v-model="headBranchContent" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经营场所">
                <el-input v-model="form.placeOfBusiness" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事务所字号">
                <el-input v-model="form.officeSignNo" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="统一社会信用代码">
                <el-input v-model="form.unifiedSocialCreditCode" type="text" readonly/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="16">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="事务所执业证书编号">
                <el-input v-model="form.practiceCertificateNo" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="批准执业文号">
                <el-input v-model="form.licenseNo" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="批准执业日期">
                <el-input v-model="form.approvedPracticeDate" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="批准部门">
                <el-input v-model="form.approvalDepartment" type="text" readonly/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="组织形式">
                <el-input v-model="form.organizationalForm" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设立方式">
                <el-input v-model="form.methodsOfIncorporation" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="股东合伙人数">
                <el-input v-model="form.numberOfPartners" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="注册资本(万元)">
                <el-input v-model="form.registeredCapital" type="text" readonly/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="所属省份">
                <el-input v-model="form.province" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属区县">
                <el-input v-model="form.district" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="通讯地址">
                <el-input v-model="form.mailingAddress" type="text" readonly/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="主任会计师/首席合伙人姓名">
                <el-input v-model="form.nameOfChargePerson" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="主任会计师/首席合伙人证书编号">
                <el-input v-model="form.certificateNoOfResponsity" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="邮政编码">
                <el-input v-model="form.postalCode" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="传真">
                <el-input v-model="form.fax" type="text" readonly/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="联系人">
                <el-input v-model="form.contacts" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="联系电话（财政系统）">
                <el-input v-model="form.contactNumber" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="联系人手机号">
                <el-input v-model="form.phoneNumberOfContactPerson" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="事务所状态">
                <el-input v-model="form.firmStatus" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="5"
                    v-if="form.isRegister==1 && form.effectTime && form.effectTime!=null && form.effectTime!=''">
              <el-form-item label="账号有效时间"
                            v-if="form.isRegister==1 && form.effectTime && form.effectTime!=null && form.effectTime!=''">
                <el-input v-model="form.effectTime" type="text" readonly/>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row :gutter="20" v-judge-account="1">
            <el-col :span="7">
              <el-form-item label="操作人">
                <el-input v-model="form.operator" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="事务所联系电话">
                <el-input v-model="form.operatorNumber" type="text" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="操作人手机号">
                <el-input v-model="form.phoneNumberOfOperator" type="text" readonly/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-judge-account="0">
            <div v-for="item in form.officeUserList" :key="item.userId"
                 style="position: relative">
              <el-col :span="7">
                <el-form-item label="操作人">
                  <el-input v-model="item.nickName" type="text" readonly/>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="事务所联系电话">
                  <el-input v-model="item.telephone" type="text" readonly/>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="操作人手机号">
                  <el-input v-model="item.phonenumber" type="text" readonly/>
                </el-form-item>
              </el-col>
            </div>
          </el-row>

          <el-row :gutter="20" class="marginTop46">
            <el-col :span="24">
              <el-form-item>
                <!--   <el-button
                     size="medium"
                     type="primary"
                     @click.native.prevent="handleTo('/office/edit')"
                   >
                     <span>编辑</span>
                   </el-button>-->
                <el-button
                  size="medium"
                  type="default"
                  @click.native.prevent="handleTo('/office/list')"
                >
                  <span>返回</span>
                </el-button>
                <el-button
                  size="medium"
                  type="default"
                  @click.native.prevent="handleOpen"
                  v-hasPermi="['office:contact-approval_add']"
                >
                  <span>申请修改操作人</span>
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

    </el-form>
    <!-- 修改操作人-->
    <el-dialog
      title="修改操作人"
      :visible.sync="dialogVisible"
      width="600px"
      append-to-body
    >
      <div class="dialogView">
        <el-form :model="modifyContactForm" :rules="modifyContactRules" ref="modifyContactForm">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="操作人" prop="contacts">
                <el-input
                  v-model="modifyContactForm.contacts"
                  placeholder="请输入操作人"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
             <el-col :span="8">
               <el-form-item label="事务所联系电话" prop="contactNumber">
                 <el-input
                   v-model="modifyContactForm.contactNumber"
                   placeholder="请输入事务所联系电话"
                   clearable
                   @keyup.enter.native="handleQuery"
                 />
               </el-form-item>
             </el-col>
            <el-col :span="8">
              <el-form-item label="操作人手机号" prop="contactMobile">
                <el-input
                  v-model="modifyContactForm.contactMobile"
                  placeholder="请输入操作人手机号"
                  maxlength="11"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24" style="margin-bottom:20px;">
              <el-form-item prop="contactsUpdateFileId" label="附件（上传png/jpg/pdf格式的，大小不超过100M）">
                <el-upload
                  class="upload-demo"
                  ref="contactsUpdate"
                  :action="upload.url"
                  :before-upload="beforeAvatarUpload"
                  :on-change="handleChange"
                  :on-success="handleFileSuccess"
                  :on-error="handleFileError"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :multiple="false"
                  :accept="'image/png, image/jpeg,application/pdf'"
                >
                  <el-button
                    type="warning"
                    icon="el-icon-download"
                    size="mini"
                    @click="templateOfficeContact"
                    v-hasPermi="['office:contact-approval_add']"
                  >附件模板下载
                  </el-button>
                  <el-button slot="trigger" size="small" type="primary" plain class="uploadBtn">上传附件</el-button>
                </el-upload>
              </el-form-item>
            </el-col>

          </el-row>
          <div class="flexRowBetween">
            <el-button type="primary" style="flex: 1;" @click="applyTo">申请修改</el-button>
            <el-button style="flex: 1;" @click="handleCancel">取消</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {editOffice, addOffice, getOffice, resetOfficePwd} from "@/api/system/office";
  import {applyUpdate} from "@/api/system/contracts"
  import { getToken } from "@/utils/auth";

  export default {
    name: "OfficeDetail",
    data() {
      let contractUpdateFile = (rule, value, callback) => {
        value = this.modifyContactForm.contactsUpdateFileId
        if (!value) {
          return callback(new Error('请上传附件'));
        }
        callback();
      };
      return {
        officeId: '',
        labelPosition: "top",
        dialogVisible: false,
        headBranchContent:"",
        form: {},
        // 修改操作人 modifyContactForm
        modifyContactForm: {
          contacts: '', // 操作人 10
          contactNumber: '', // 操作电话 20
          contactMobile: '', // 操作人手机号 20
          contactsUpdateFileId: undefined
        },
        modifyContactRules: {
          contacts: [
            {required: true, trigger: "blur", message: "操作人不能为空"},
            {min: 1, max: 20, message: '长度在 3 到 100 个字符', trigger: 'blur'}
          ],
          contactNumber: [
            {required: true, trigger: "blur", message: "操作电话不能为空"},
            {min: 4, max: 20, message: '长度在 3 到 100 个字符', trigger: 'blur'}
          ],
          contactMobile: [
            {required: true, trigger: "blur", message: "操作人手机号不能为空"},
            {min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur'}
          ],
          contactsUpdateFileId: [
            {validator: contractUpdateFile, trigger: "change", message: "上传附件不能为空"},
          ],
        },
        fileList: [], // 上传 文件列表（唯一）
        // 上传
        upload: {
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/ftp/upload",
        },
      };
    },
    created() {
      this.officeId = this.$route.query.officeId;
      if (this.officeId) {
        getOffice(this.officeId).then(res => {
          if (res.msg && res.msg == "无权限") {
            this.$message({
              message: "无权限!",
              type: 'error'
            });
            this.$router.push("/office/list")
          } else {
            this.form = res.data;
            let firmStatus = this.form.firmStatus;
            if (firmStatus === '0') {
              this.form.firmStatus = '正常'
            } else if (firmStatus === '1') {
              this.form.firmStatus = '已暂停'
            } else if (firmStatus === '2') {
              this.form.firmStatus = '已终止'
            }
            // 当数据为空时，显示 -
            for (let key in this.form) {
              if (this.form[key] === undefined || this.form[key] === null) {
                if(key=='operator'||key=='phoneNumberOfOperator'){
                  this.form[key] = '';
                }else{
                  this.form[key] = '-';
                }
              }
            }
          }
        });
      }
    },
    activated() {
      this.officeId = this.$route.query.officeId;
      if (this.officeId) {
        getOffice(this.officeId).then(res => {
          if (res.msg && res.msg == "无权限") {
            this.$message({
              message: "无权限!",
              type: 'error'
            });
            this.$router.push("/office/list")
          } else {
            this.form = res.data;
            let firmStatus = this.form.firmStatus;
            if (firmStatus === '0') {
              this.form.firmStatus = '正常'
            } else if (firmStatus === '1') {
              this.form.firmStatus = '已暂停'
            } else if (firmStatus === '2') {
              this.form.firmStatus = '已终止'
            }
            let headOfficeOrBranchOffice = this.form.headOfficeOrBranchOffice;
            if(headOfficeOrBranchOffice==='1'){
              this.headBranchContent =  "总所"
            }else if(headOfficeOrBranchOffice === '2'){
              this.headBranchContent =  "分所"
            }
            // 当数据为空时，显示 -
            for (let key in this.form) {
              if (this.form[key] === undefined || this.form[key] === null) {
                if(key=='operator'||key=='phoneNumberOfOperator'){
                  this.form[key] = '';
                }else{
                  this.form[key] = '-';
                }
              }
            }
          }
        });
      }
    },
    methods: {
      handleTo(path) {
        this.$store.dispatch("tagsView/delView", this.$route);
        this.colseCurWin();
      },
      handleGoBack() {
        this.colseCurWin();
      },
      handleOpen() {
        debugger
        this.dialogVisible = true;
        this.modifyContactForm.contacts = this.form.operator;
        this.modifyContactForm.contactNumber = this.form.operatorNumber;
        this.modifyContactForm.contactMobile = this.form.phoneNumberOfOperator;
        this.modifyContactForm.officeId = this.form.officeId;
        this.modifyContactForm.contactsUpdateFileId = undefined;
        this.fileList =[]

      },
      applyTo() {
        this.$refs.modifyContactForm.validate(valid => {
          if (valid) {
            this.loading = true;
            applyUpdate(this.modifyContactForm).then(res => {
              this.dialogVisible = false;
              this.loading = false;
              this.$message({
                message: '申请修改操作人已提交审批!',
                type: 'success'
              });
            }).catch(() => {
              this.loading = false;
            });
          }
        });
      },
      handleCancel() {
        this.dialogVisible = false;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isPDF = file.type === 'application/pdf';
        const isLt2M = file.size / 1024 / 1024 < 100;
        if (!isJPG && !isPNG && !isPDF) {
          this.$message.error('上传附件只允许上传 JPG或PNG或PDF 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传附件大小不能超过 100MB!');
        }
       return isJPG || isPNG || isPDF && isLt2M;
      },
      templateOfficeContact() {
        window.open(process.env.VUE_APP_BASE_API + "/office/template/officeContact");
      },
      handleChange(file, fileList) {
        if (fileList.length > 0) {
          this.fileList = [fileList[fileList.length - 1]]  // 这一步，是 展示最后一次选择的csv文件
        }
      },
      /** 文件上传 成功 处理 */
      handleFileSuccess(response, file, fileList) {
        this.$refs.form.clearValidate(['contactsUpdateFileId']); // 清空单一校验
        this.modifyContactForm.contactsUpdateFileId = response.fileId;

      },
      /** 文件上传 失败 处理 */
      handleFileError(response, file, fileList) {
        this.$message({
          type: 'error',
          message: '上传失败!'
        });
      },
      /** 移除文件 处理 */
      handleRemove(file, fileList) { // 移除
        this.modifyContactForm.contactsUpdateFileId = undefined
      },
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  ::v-deep .el-form-item__label {
    position: relative;
    font-size: 15px;
  }

  ::v-deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
    content: ''; // 去掉 * 号
  }

  ::v-deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:after {
    content: '*'; // 后置 * 号
    color: #ff4949;
    margin-right: 4px;
    right: -15px;
    top: 2px;
    position: absolute;
  }

  ::v-deep .el-input__inner {
    &::-webkit-input-placeholder {
      font-size: 13px;
    }
  }

  ::v-deep .el-date-editor.el-input, ::v-deep .el-select {
    width: 100%;
  }

  /*readonly 只读样式*/
  ::v-deep input[readonly] {
    border: 1px solid #EEF0F3;
  }

  /*input框只读样式*/
  ::v-deep textarea[readonly] {
    border: 1px solid #EEF0F3;
  }

  /*textarea框只读样式*/
  ::v-deep .el-select {
    input[readonly] {
      border: 1px solid #EEF0F3;
    }

    /*select的 input框默认就是只读的，要还原只读(带边框)样式*/
  }

  .dialogView {
    ::v-deep .el-input--suffix .el-input__inner {
      padding-right: 10px;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 10px 20px;
  }
</style>
